<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=0.9">
    <title>图书列表</title>
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootoast.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        .my-container {
            height: 100%;
        }

        .table .text {
            /* padding-top: 10px !important; */
        }

        .table th, .table td {
            text-align: center;
        }

        .table td {
            display: table-cell !important;
            vertical-align: middle !important;
        }

        .footer {
            position: absolute;
            margin-top: 40px;
            margin-bottom: 20px;
            left: 0;
            right: 0;
            bottom: 10px;
            color: #666;
            text-align: center;
        }
    </style>
    <!-- 引入jquery.js-->
    <script src="./static/bootstrap-3.4.1/js/jquery-3.6.0.min.js"></script>
    <!-- 引入bootstrap.js-->
    <script src="./static/bootstrap-3.4.1/js/bootstrap.js"></script>
    <script src="./static/bootstrap-3.4.1/js/bootoast.js"></script>
    <!-- 引入上传文件的插件 -->
    <script src="./static/js/ajaxupload.js"></script>
    <script>
        // 创建一个全局的keywords，分页时候要用
        var keywords = "''"
        var coursePic = './static/img/default-pic.png';
        /**
         * dom加载完成之后，自动执行
         */
        $(function () {
            let adminHome = new AdminHome();
            // 初始化模态框
            adminHome.initModal();
            // 获取图书列表数据
            adminHome.queryAll(null);
            // 初始化点击事件
            adminHome.click();
            // 文件上传的方法
            adminHome.fileUpload();

        })

        class AdminHome {
            constructor() {
            }

            /**
             * 文件上传
             */
            fileUpload() {
                //上传图片
                new AjaxUpload('#addLabProdPic', {
                    action: '/bookshop/upload',// 对应服务器的url地址,大家只改这里一处地方
                    name: 'picFile',
                    responseType: 'json',
                    onSubmit: function (file, ext) {
                        if (ext && /^(jpg|png|bmp)$/.test(ext.toLowerCase())) {
                            this.setData({
                                'picName': file
                            });
                        } else {
                            alert("请上传格式为 jpg|png|bmp 的图片！");
                            return false;
                        }
                    },
                    onComplete: function (file, response) {
                        if (response.error) {
                            alert(response.error);
                            return;
                        }
                        console.log("response", response)
                        coursePic = "/bookshop/imgs/bookPic/" + response.result;// 大家这里只需要改称自己的根路径
                        console.log("获取上传的图片：" + coursePic)
                        $('#bookPic').attr('src', coursePic);
                    }
                });
            }

            /**
             * 根据关键字从服务端获取图书列表信息
             * @param keywords 关键字
             * @param currentPage 当前页
             */
            queryAll(keywords, currentPage) {
                // 处理关键字
                if (!keywords) {
                    keywords = "''";// 这里需要传递一个单引号
                }
                // 处理当前页
                if (!currentPage) {
                    currentPage = 1;// 如果当前页没有设置，就默认第1页
                }
                // 为了防止添加的数据重复，所以需要清空之前添加的数据
                $(".table tbody").empty();// 每次先清空表格数据，再更新
                $(".pagination").empty();// 每次先清空分页条数据，再更新
                // 我们在前端访问服务端接口使用jQuery提供的ajax
                $.ajax({
                    type: 'GET',// 提交方式，跟接口规定的一致
                    url: `/bookshop/book/findAll/${keywords}/${currentPage}/-1`,// url服务端的接口地址
                    cache: false,// 不启用缓存
                    dataType: 'json',// 期望后端返回的数据的类型
                    success: function (res) {// success,成功响应后自动执行，res封装后端响应回来的信息
                        console.log("返回图书列表信息", res)
                        if (res.code == 1) {// 数据查询成功
                            // 判断后端是否传过来列表数据
                            if (res.result && res.result.list.length > 0) {// 有数据
                                // 遍历图书数据
                                for (let book of res.result.list) {

                                    $(`
                                      <tr>
                                        <td class="text">${book.bookId}</td>
                                        <td class="text">${book.bookName}</td>
                                        <td class="text">${book.bookType.booktypeName}</td>
                                        <td class="text">
                                             <img src="${book.bookPic}" style="width:140px;height:80px;"/>
                                        </td>
                                        <td class="text">${book.author}</td>
                                        <td class="text">${book.publishingHouse}</td>
                                        <td class="text">${book.publishingDate}</td>
                                        <td class="text">${book.price}</td>
                                        <td class="text" width="240" style="text-align: left;">${book.depict}</td>
                                        <td class="text" id="status-${book.bookId}"></td>
                                        <td class="text" id="btn-${book.bookId}">
                                           <button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal" data-book-id=${book.bookId}
                                    data-book-name=${book.bookName} data-book-booktypeid=${book.bookType.booktypeId} data-book-booktypename=${book.bookType.booktypeName}
                                    data-book-pic=${book.bookPic} data-author=${book.author} data-publishing-house=${book.publishingHouse} data-publishing-date=${book.publishingDate}
                                    data-price=${book.price} data-depict=${book.depict} data-status=${book.status}><i class="glyphicon glyphicon-pencil"></i>&nbsp;编辑</button>
                                            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal2" data-book-id=${book.bookId}><i class="glyphicon glyphicon-trash"></i>&nbsp;删除</button>
                                        </td>
                                      </tr>
                                    `).appendTo($(".table tbody"))
                                    console.log("book.status:",book.status)
                                    // 处理上架状态显示及按钮
                                    if(book.status==0){
                                        $(`#status-${book.bookId}`).append($(`<span class="label label-default">未上架</span>`))
                                        // $(`#btn-${book.bookId}`).append($(` <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal3" data-book-id=${book.bookId}><i class="glyphicon glyphicon-eye-open"></i>&nbsp;上架</button>`))
                                    }else if(book.status ==1){
                                        $(`#status-${book.bookId}`).append($(`<span class="label label-success">已上架</span>`))
                                        //$(`#btn-${book.bookId}`).append($(` <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal4" data-book-id=${book.bookId}><i class="glyphicon glyphicon-eye-close"></i>&nbsp;下架</button>`))
                                    }else if(book.status ==2){
                                        $(`#status-${book.bookId}`).append($(`<span class="label label-danger">已下架</span>`))
                                        //$(`#btn-${book.bookId}`).append($(` <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal3" data-book-id=${book.bookId}><i class="glyphicon glyphicon-eye-close"></i>&nbsp;上架</button>`))
                                    }



                                }
                                // 处理分页
                                if (res.result.navigatepageNums && res.result.navigatepageNums.length > 0) {
                                    // 遍历数组，获取页码
                                    // 上一页
                                    $(`<li>
                                         <a href="javascript:void(0)" rel="${res.result.hasPreviousPage ? res.result.prePage : 1}" aria-label="Previous" onclick="changePage(this)">
                                             <span aria-hidden="true">&laquo;</span>
                                         </a>
                                    </li>`).appendTo($(".pagination"))
                                    // 数字页
                                    for (let pageNum of res.result.navigatepageNums) {
                                        console.log("页码：", pageNum)
                                        // 动态添加li到ul
                                        $(`<li><a href="javascript:void(0)" rel="${pageNum}" onclick="changePage(this)">${pageNum}</a></li>`).appendTo($(".pagination"))
                                    }
                                    // 下一页
                                    $(`<li>
                                         <a href="javascript:void(0)" aria-label="Next" rel="${res.result.hasNextPage ? res.result.nextPage : res.result.pages}" onclick="changePage(this)">
                                             <span aria-hidden="true">&raquo;</span>
                                         </a>
                                    </li>`).appendTo($(".pagination"))
                                    // 当前第x页，共n页
                                    $(`<li>
                                         <span aria-hidden="true">当前第${res.result.pageNum}页，共${res.result.pages}页</span>
                                    </li>`).appendTo($(".pagination"))
                                }


                            } else {// 无数据
                                $(`
                                  <tr>
                                      <td colspan="11" style="text-align: center;border:none;padding: 150px 0;">当前没有查询到数据！</td>
                                  </tr>
                                `).appendTo($(".table tbody"))
                            }
                        } else {// 数据查询失败

                        }
                    },
                    error: function (err) {
                        console.log("Error=>", err);
                    }
                })
            }

            /**
             * 管理所有的点击事件
             */
            click() {
                // 点击事件中，无法获取到对象中的this
                let that = this;
                $("#searchBtn").click(function () {
                    // 获取搜索输入框中内容
                    keywords = $("#searchValue").val();
                    // 访问服务器
                    that.queryAll(keywords);

                })
                // 保存表单
                $("#save-btn").click(function () {
                    that.save();
                })
                // 删除图书
                $("#del-btn").click(function () {
                    let bookId = $("#userId2").val();
                    if (bookId) {
                        // 提交表单
                        $.ajax({
                            type: 'post',// 提交方式 post
                            url: `/bookshop/book/delete/${bookId}`,
                            cache: false,// 不启用缓存
                            dataType: 'json',// 期望服务器响应的数据类型 json
                            success: function (result) {// 响应成功就会自动执行该方法，result中封装的是响应的结果
                                console.log(result);
                                // 提示
                                if (result.code == 1) {
                                    bootoast({
                                        message: result.msg,
                                        type: 'success',
                                        position: 'top',
                                        timeout: 2
                                    });
                                } else {
                                    bootoast({
                                        message: result.msg,
                                        type: 'danger',
                                        position: 'top',
                                        timeout: 2
                                    });
                                }

                                // 更新列表
                                that.queryAll(null);
                                // 关闭修改模态框
                                $('#exampleModal2').modal('hide')


                            },
                            error: function (error) {// 响应失败就会自动执行该方法，error中封装的是错误信息
                                // 提示
                                bootoast({
                                    message: '服务器请求错误！',
                                    type: 'danger',
                                    position: 'top',
                                    timeout: 2
                                });
                            }

                        })
                    }

                });
                // 上架图书
                $("#del-btn3").click(function () {
                    let bookId = $("#userId3").val();
                    if (bookId) {
                        // 提交表单
                        $.ajax({
                            type: 'get',// 提交方式 post
                            url: `/bookshop/book/updateStatus/${bookId}/1`,
                            cache: false,// 不启用缓存
                            dataType: 'json',// 期望服务器响应的数据类型 json
                            success: function (result) {// 响应成功就会自动执行该方法，result中封装的是响应的结果
                                console.log(result);
                                // 提示
                                if (result.code == 1) {
                                    bootoast({
                                        message: result.msg,
                                        type: 'success',
                                        position: 'top',
                                        timeout: 2
                                    });
                                } else {
                                    bootoast({
                                        message: result.msg,
                                        type: 'danger',
                                        position: 'top',
                                        timeout: 2
                                    });
                                }

                                // 更新列表
                                that.queryAll(null);
                                // 关闭修改模态框
                                $('#exampleModal3').modal('hide')


                            },
                            error: function (error) {// 响应失败就会自动执行该方法，error中封装的是错误信息
                                // 提示
                                bootoast({
                                    message: '服务器请求错误！',
                                    type: 'danger',
                                    position: 'top',
                                    timeout: 2
                                });
                            }

                        })
                    }

                });
                // 下架图书
                $("#del-btn4").click(function () {
                    let bookId = $("#userId4").val();
                    if (bookId) {
                        // 提交表单
                        $.ajax({
                            type: 'get',// 提交方式 post
                            url: `/bookshop/book/updateStatus/${bookId}/2`,
                            cache: false,// 不启用缓存
                            dataType: 'json',// 期望服务器响应的数据类型 json
                            success: function (result) {// 响应成功就会自动执行该方法，result中封装的是响应的结果
                                console.log(result);
                                // 提示
                                if (result.code == 1) {
                                    bootoast({
                                        message: result.msg,
                                        type: 'success',
                                        position: 'top',
                                        timeout: 2
                                    });
                                } else {
                                    bootoast({
                                        message: result.msg,
                                        type: 'danger',
                                        position: 'top',
                                        timeout: 2
                                    });
                                }

                                // 更新列表
                                that.queryAll(null);
                                // 关闭修改模态框
                                $('#exampleModal4').modal('hide')


                            },
                            error: function (error) {// 响应失败就会自动执行该方法，error中封装的是错误信息
                                // 提示
                                bootoast({
                                    message: '服务器请求错误！',
                                    type: 'danger',
                                    position: 'top',
                                    timeout: 2
                                });
                            }

                        })
                    }

                });
            }

            /**
             * 修改图书图书信息
             * @returns {boolean}
             */
            save() {
                let that = this;
                // 获取表单数据
                let bookId = $("#bookId").val();
                let bookName = $("#bookName").val();
                let bookPic = coursePic;
                let author = $("#author").val();
                let publishingHouse = $("#publishingHouse").val();
                let publishingDate = $("#publishingDate").val();
                let depict = $("#depict").val();
                let price = $("#price").val();
                // 进行非空校验
                if (!bookName || bookName === '') {
                    bootoast({
                        message: '图书名称不能为空！',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                    return false;
                }
                if (!bookPic || bookPic === '') {
                    bootoast({
                        message: '图书封面不能为空！',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                    return false;
                }
                if (!author || author === '') {
                    bootoast({
                        message: '图书作者不能为空！',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                    return false;
                }
                if (!publishingHouse || publishingHouse === '') {
                    bootoast({
                        message: '出版社不能为空！',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                    return false;
                }
                if (!publishingDate || publishingDate === '') {
                    bootoast({
                        message: '出版日期不能为空！',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                    return false;
                }
                if (!price || price === '') {
                    bootoast({
                        message: '图书价格不能为空！',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                    return false;
                }
                if (!depict || depict === '') {
                    bootoast({
                        message: '图书描述不能为空！',
                        type: 'danger',
                        position: 'top',
                        timeout: 2
                    });
                    return false;
                }
                // 提交表单
                $.ajax({
                    type: 'post',// 提交方式 post
                    url: $("#myForm").attr("action"),// /bookshop/book/update
                    cache: false,// 不启用缓存
                    data: `bookId=${bookId}&bookName=${bookName}&bookPic=${bookPic}&author=${author}&publishingHouse=${publishingHouse}&publishingDate=${publishingDate}&price=${price}&depict=${depict}`,// 数据可以自由拼接
                    dataType: 'json',// 期望服务器响应的数据类型 json
                    success: function (result) {// 响应成功就会自动执行该方法，result中封装的是响应的结果
                        console.log(result);
                        // 提示
                        bootoast({
                            message: result.msg,
                            type: 'success',
                            position: 'top',
                            timeout: 2
                        });
                        // 更新列表
                        that.queryAll(null);
                        // 关闭修改模态框
                        $('#exampleModal').modal('hide')
                    },
                    error: function (error) {// 响应失败就会自动执行该方法，error中封装的是错误信息
                        // 提示
                        bootoast({
                            message: '服务器请求错误！',
                            type: 'danger',
                            position: 'top',
                            timeout: 2
                        });
                    }

                })
                return true;
            }

            /**
             * 管理模态框
             */
            initModal() {
                // 处理修改模态框
                $('#exampleModal').on('show.bs.modal', function (event) {
                    // 获取修改按钮
                    var button = $(event.relatedTarget) // Button that triggered the modal
                    // 接收传递的数据（接收编辑按钮上，通过data-传递的数据）
                    var bookId = button.data('book-id');// data()中只能是小写，单词之间使用-分隔
                    var bookName = button.data('book-name');
                    var booktypeId = button.data('book-booktypeid')
                    var booktypeName = button.data('book-booktypename')
                    var bookPic = button.data('book-pic')
                    coursePic = bookPic;// 如果这里不处理，图片会丢失
                    var author = button.data("author")
                    var publishingHouse = button.data("publishing-house")
                    var publishingDate = button.data('publishing-date')
                    var price = button.data('price')
                    var depict = button.data('depict')
                    var modal = $(this)
                    // 绑定数据(将编辑按钮上携带的数据绑定到弹出框)
                    modal.find('.modal-body #bookId').val(bookId)
                    modal.find('.modal-body #bookName').val(bookName)
                    modal.find('.modal-body #bookTypeName').val(booktypeName)
                    modal.find('.modal-body #bookPic').attr("src", bookPic)
                    modal.find('.modal-body #author').val(author)
                    modal.find('.modal-body #publishingHouse').val(publishingHouse)
                    modal.find('.modal-body #publishingDate').val(publishingDate)
                    modal.find('.modal-body #price').val(price)
                    modal.find('.modal-body #depict').val(depict)
                    // 处理职称（下拉框）
                    // modal.find(`.modal-body #rank option[value=${rank}]`).attr("selected", true);

                })
                // 处理删除模态框
                $('#exampleModal2').on('show.bs.modal', function (event) {
                    // 获取修改按钮
                    var button = $(event.relatedTarget) // Button that triggered the modal
                    // 接收传递的数据
                    var bookId = button.data('book-id');
                    var modal = $(this)
                    // 绑定数据
                    modal.find('.modal-body #userId2').val(bookId);

                })
                // 处理上架模态框
                $('#exampleModal3').on('show.bs.modal', function (event) {
                    // 获取修改按钮
                    var button = $(event.relatedTarget) // Button that triggered the modal
                    // 接收传递的数据
                    var bookId = button.data('book-id');
                    var modal = $(this)
                    // 绑定数据
                    modal.find('.modal-body #userId3').val(bookId);

                })
                // 处理下架模态框
                $('#exampleModal4').on('show.bs.modal', function (event) {
                    // 获取修改按钮
                    var button = $(event.relatedTarget) // Button that triggered the modal
                    // 接收传递的数据
                    var bookId = button.data('book-id');
                    var modal = $(this)
                    // 绑定数据
                    modal.find('.modal-body #userId4').val(bookId);

                })
            }

        }

        // 分页条跳转页面
        function changePage(e) {
            console.log($(e).attr("rel"))// 获取按钮上携带的页码
            new AdminHome().queryAll(keywords, $(e).attr("rel"))
        }
    </script>
</head>

<body>
<div class="container-fluid my-container">
    <!-- 页头 -->
    <ol class="breadcrumb" style="margin-top:5px;">
        <li><a href="#">主页</a></li>
        <li><a href="#">图书管理</a></li>
        <li class="active">图书列表</li>
    </ol>
    <!-- 检索框 -->
    <form class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" id="searchValue" placeholder="请输入关键字">
        </div>
        <button type="button" class="btn btn-primary" id="searchBtn"><i class="glyphicon glyphicon-search"></i>&nbsp;搜索</button>
        <!--        <button type="button" class="btn btn-danger">批量删除</button>-->
    </form>
    <!-- 内容 -->
    <div class="panel panel-default" style="margin-top: 10px;">
        <div class="panel-heading">
            <h3 class="panel-title"><i class="glyphicon glyphicon-edit"></i>&nbsp;操作面板</h3>
        </div>
        <div class="panel-body">
            <!-- 表格 -->
            <table class="table table-hover table-condensed table-bordered table-striped">
                <thead>
                <!-- 标题行 -->
                <tr>
                    <th>编号</th>
                    <th>图书名称</th>
                    <th>图书类别</th>
                    <th>封面图片</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>描述信息</th>
                    <th>上架状态</th>
                    <th width="180">操作</th>
                </tr>
                </thead>
                <tbody>
                <!-- 内容行 -->
                </tbody>
            </table>
            <!-- 分页组件 -->
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <!-- 动态生成分页按钮 -->
                </ul>
            </nav>
        </div>
    </div>


    <!-- 尾部 -->
<!--    <div class="footer">技术支持:西安粤嵌信息科技有限公司</div>-->
</div>
<!-- 模态框 图书信息展示与修改-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel"
                    style="border-left: 5px solid dodgerblue;padding-left: 10px;">编辑图书信息</h4>
            </div>
            <div class="modal-body">
                <!-- 表单 -->
                <form action="/bookshop/book/update" method="post" id="myForm">
                    <!-- 图书编号只能看，不能改，所以使用readonly-->
                    <div class="form-group">
                        <label for="bookId">编<span
                                style="color:transparent;user-select: none;">隐藏</span>号：</label>
                        <input type="text" class="form-control" name="bookId" id="bookId" readonly>
                    </div>
                    <!-- 图书名称 -->
                    <div class="form-group">
                        <label for="bookName">图书名称：</label>
                        <input type="text" class="form-control" name="bookName" id="bookName" placeholder="请输入图书名称">
                    </div>
                    <!-- 图书类别 图书类别，禁止改动-->
                    <div class="form-group">
                        <label for="bookTypeName">图书类别：</label>
                        <input type="text" class="form-control" name="bookTypeName" id="bookTypeName" readonly>
                    </div>
                    <!-- 图书封面 -->
                    <div class="form-group">
                        <label>封面图片：</label>
                        <div>
                            <img src="./static/img/default-pic.png" class="img-thumbnail" alt=""
                                 style="height: 120px;position: relative;left: 0px;" id="bookPic"/>
                            <button type="button" class="btn btn-primary btn-xs" id="addLabProdPic"
                                    style="margin-left: 40px;"><i class="glyphicon glyphicon-folder-open"></i> &nbsp;选择图片
                            </button>
                        </div>

                    </div>
                    <!-- 图书作者 -->
                    <div class="form-group">
                        <label for="author">作<span style="color:transparent;user-select: none;">隐藏</span>者：</label>
                        <input type="text" class="form-control" name="author" id="author" placeholder="请输入图书作者">
                    </div>
                    <!-- 出版社 -->
                    <div class="form-group">
                        <label for="publishingHouse"><span
                                style="color:transparent;user-select: none;">隐</span>出版社：</label>
                        <input type="text" class="form-control" name="publishingHouse" id="publishingHouse"
                               placeholder="请输入出版社">
                    </div>
                    <!-- 出版日期 -->
                    <div class="form-group">
                        <label for="publishingDate">出版日期：</label>
                        <div class="input-group">

                            <input type="date" class="form-control" name="publishingDate" id="publishingDate"
                                   placeholder="请输入初版日期">
                            <div class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></div>
                        </div>
                    </div>
                    <!-- 图书价格 -->
                    <div class="form-group">
                        <label for="price">图书价格：</label>
                        <div class="input-group">
                            <div class="input-group-addon">￥</div>
                            <input type="text" class="form-control" name="price" id="price" placeholder="请输入图书价格">
                            <div class="input-group-addon">.00</div>
                        </div>
                    </div>
                    <!-- 图书描述 -->
                    <div class="form-group">
                        <label for="depict">描<span style="color:transparent;user-select: none;">隐藏</span>述：</label>
                        <textarea class="form-control" rows="3" name="depict" id="depict"
                                  placeholder="请输入图书的描述信息"></textarea>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="save-btn">保存</button>
            </div>
        </div>
    </div>
</div>
<!--删除元素模态框-->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel2"
                    style="border-left: 5px solid dodgerblue;padding-left: 10px;">温馨提示</h4>
            </div>
            <div class="modal-body">
                确定删除当前图书？
                <input type="hidden" id="userId2">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="del-btn">确认</button>
            </div>
        </div>
    </div>
</div>
<!--图书上架模态框-->
<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel3"
                    style="border-left: 5px solid dodgerblue;padding-left: 10px;">温馨提示</h4>
            </div>
            <div class="modal-body">
                确定上架当前图书？
                <input type="hidden" id="userId3">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="del-btn3">确认</button>
            </div>
        </div>
    </div>
</div>
<!--图书下架模态框-->
<div class="modal fade" id="exampleModal4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel4"
                    style="border-left: 5px solid dodgerblue;padding-left: 10px;">温馨提示</h4>
            </div>
            <div class="modal-body">
                确定下架当前图书？
                <input type="hidden" id="userId4">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="del-btn4">确认</button>
            </div>
        </div>
    </div>
</div>
<script>

</script>
</body>

</html>